<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <script type="text/javascript" src="../../js/functionalAreas/forestDataDisplay/rem.js"></script>

    <link rel="stylesheet" href="../../css/functionalAreas/forestDataDisplay/style.css">
    <title>各森林数据信息展示</title>
    <style type="text/css">
        #chart4{
            cursor: pointer;
            z-index: 1;
        }

        .city-data{
            z-index: -1;
        }

        .roll{
            font-size: 15px;
            color: #ffffff;
            z-index: 2;
        }
    </style>
</head>

<body style="visibility: hidden;">

    <div class="container-flex" tabindex="0" hidefocus="true">

        <div class="box-left">
            <div style="display: flex;height: 5%;border-bottom: solid 1.8px rgb(57,150,235) ;width: 95%">
                <div style="font-size: 10px;color: #fff;font-size: 18px;padding-top:2%;padding-left:15px;flex: 1"><a href="../../index.html" style="color: #fff;text-decoration: none;font-weight: bold">首页</a></div>
                <div style="font-size: 10px;color: #337ab7;font-size: 18px;padding-top:2%;flex: 1"><a href="forestDataDisplay.html" style="color: #337ab7;text-decoration: none;font-weight: bold">各森林数据展示</a></div>
                <div style="font-size: 10px;color: #fff;font-size: 18px;flex: 1;padding-top:2%;text-align: right;padding-right: 10px;"><a href="forestFireForecast.html" style="color: #fff;text-decoration: none;font-weight: bold">林火预测</a></div>
            </div>
            <div class="left-top">
                <div class="current-num">
                    <div>当前选择地区</div>
                    <p><span class="selectCity">昆明市</span></p>
                </div>
            </div>
            <div class="left-center">
                <div class="title-box">
                    <h6>昆明市气温图</h6>
                </div>
                <div class="chart-box pie-chart">
                    <div id="temperature" style="width: 95%"></div>

                </div>
            </div>
            <div class="left-bottom" class="select">
                <div class="title-box">
                    <h6>湿度图</h6>
                    <span style="font-size: 0.15rem;color:#fff;padding-left: 25%" id="bar1">柱状图</span>
                    <span style="font-size: 0.15rem;color:#fff;padding-left: 10%" id="line1">折线图</span>
                    <span style="font-size: 0.15rem;color:#fff;padding-left: 10%" id="radar1">雷达图</span>
                </div>
                <div class="chart-box">
                    <div id="dampness" class="gd-map"></div>
                </div>
            </div>
        </div>
        <div class="box-center">
            <div class="center-top">

                <h1><a href="../../index.html" style="color:#fff; text-decoration: none;font-weight: bold;font-size: 35px">云南森林火灾大数据平台</a></h1>
            </div>
            <div class="center-center">
                <div class="weather-box">
                    <div class="data">
                        <p class="time" id="time">00:00:00</p>
                        <p id="date"></p>
                    </div>
                    <!--提示信息，在选择具体城市后隐藏-->
<!--                    <p style="font-size: 20px;color: #ffffff" class="weatherTip"></p>-->

                    <!--地区天气信息，在选择具体城市后显示-->
                    <div class="weather">
                        <img id="weatherImg" src="../../images/functionalAreas/forestDataDisplay/weather/weather_img01.png" alt="">
                        <div id="weather" >
                            <p class="active">多云</p>
                            <p>16-22℃</p>
                            <p><span class="selectCity">昆明市</span></p>
                        </div>
                    </div>
                </div>
                <img src="../../images/functionalAreas/forestDataDisplay/line_bg.png" alt="">
            </div>

            <div class="center-bottom">
                <marquee class="roll" >请点击地图选择要查看的地区</marquee>

                <!--中国地图-->
                <div class="chart-box">
                    <div id="chart4" style="width:100%;height:95%;cursor: pointer"></div>

                    <!--隐藏域，用于存储点击时获取的地图数据-->
                    <text class="provinceName" hidden></text>
                    <text class="areaName" hidden></text>
                </div>

<!--                <div class="city-data">-->
<!--                    <div class="enlarge-box">-->
<!--                        <button class="enlarge-btn" id="fangda"></button>-->
<!--                        <ul class="modal-btn">-->
<!--                            <li style="font-size: 5px;">-->
<!--                                <div></div>气温</li>-->
<!--                            <li style="font-size: 5px;">-->
<!--                                <div></div>湿度</li>-->
<!--                            <li style="font-size: 5px;">-->
<!--                                <div></div>光照</li>-->
<!--                            <li style="font-size: 5px;">-->
<!--                                <div></div>风速</li>-->

<!--                        </ul>-->
<!--                    </div>-->
<!--                </div>-->
            </div>

        </div>
        <div class="box-right">
            <div style="display: flex;height: 5%;border-bottom: solid 1.8px rgb(57,150,235) ;width: 95%;margin-left: 20px">
                <div style="font-size: 10px;color: #fff;font-size: 18px;padding-top: 2%;padding-left:15px;flex: 1"><a href="dronePatrol.html" style="color: #fff;text-decoration: none;font-weight: bold">无人机巡逻</a></div>
                <div style="font-size: 10px;color: #fff;font-size: 18px;padding-top: 2%;flex: 1;text-align: right;padding-right: 50px"><a href="../systemManagement/index.html" style="color: #fff;text-decoration: none;font-weight: bold">系统管理</a></div>
            </div>
            <div class="right-top">
                <div class="title-box">
                    <h6 id="barTitle">昆明市风速图</h6>
                </div>
                <div class="chart-box">
                    <div id="chart3" style="width:100%;height:40%;"></div>
                    <div id="chart3_1" style="width:100%;height:60%;"></div>
                </div>
                <div class="data-box" style="display:none;">
                    <table class="table1">
                        <tr>
                            <td>入库件</td>
                            <td colspan="3" class="table-data dph-data1">0</td>
                        </tr>
                        <tr class="bg-color">
                            <td rowspan="2">在库件</td>
                            <td rowspan="2" class="table-data dph-data2">0</td>
                            <td>正常件</td>
                            <td class="table-data dph-data3">0</td>
                        </tr>
                        <tr class="bg-color">
                            <td>滞留件</td>
                            <td class="table-data dph-data5">0</td>
                        </tr>
                        <tr>
                            <td rowspan="2">出库件</td>
                            <td rowspan="2" class="dph-data6">0</td>
                            <td>派送件</td>
                            <td class="table-data dph-data7">0</td>
                        </tr>
                        <tr>
                            <td>自提件</td>
                            <td class="table-data dph-data8">0</td>
                        </tr>
                        <tr class="bg-color">
                            <td>退签件</td>
                            <td colspan="3" class="table-data dph-data9">0</td>
                        </tr>
                        <tr>
                            <td>丢失件</td>
                            <td colspan="3" class="table-data dph-data4">0</td>
                        </tr>
                    </table>
                    <table class="table1" style="display:none;">
                        <tr>
                            <td>入库件</td>
                            <td colspan="3" class="table-data mail-data1">1</td>
                        </tr>
                        <tr class="bg-color">
                            <td rowspan="2">在库件</td>
                            <td rowspan="2" class="table-data mail-data2">1</td>
                            <td>正常件</td>
                            <td class="table-data mail-data7">1</td>
                        </tr>
                        <tr class="bg-color">
                            <td>滞留件</td>
                            <td class="table-data mail-data4">1</td>
                        </tr>

                        <tr>
                            <td>出库件</td>
                            <td colspan="3" class="mail-data6">1</td>
                        </tr>
                        <tr class="bg-color">
                            <td>丢失件</td>
                            <td colspan="3" class="mail-data3">1</td>
                        </tr>
                        <tr>
                            <td>撤销件</td>
                            <td colspan="3" class="table-data mail-data5">1</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!--地区地图展示-->
            <div class="right-bottom">
                <!--滚动字幕提示，在选择具体城市时显示-->
                <p id="tip"></p>

                <!--选择省份后选择具体城市-->
                <div class="data-box" id="areaMap">
                    <p style="font-size: 50px;color:#ffffff;text-align: center;margin-top: 50px">未选择</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="pop-up">
            <span class="close-pop"></span>
            <h2 class="title">当前到件量</h2>
            <div class="pop-data-box">
                <p>123,456,789</p>
            </div>
        </div>

        <div class="pop-up">
            <span class="close-pop"></span>
            <h2 class="title">派件入库量占比</h2>
            <div class="chart-box pie-chart">
                <div id="pie1"></div>
                <div>
                    <div class="pie-data">
                    </div>
                </div>
            </div>
        </div>

        <div class="pop-up">
            <span class="close-pop"></span>
            <h2 class="title">广东省寄派件数据 </h2>
            <div class="chart-box pop-chart">
                <div id="gdMaps" class="gd-map"></div>
            </div>
        </div>

        <div class="pop-up">
            <span class="close-pop"></span>
            <div class="filter-con pop-filters" style="display:flex" data-type="4">
                <div class="select-pop" tabindex="0" hidefocus="true">
                    <ul id="barTypes">
                        <li class="active" data-value="1">派件</li>
                        <li data-value="2">寄件</li>
                    </ul>
                </div>
                <div class="select" tabindex="0" hidefocus="true">
                    <div class="select-div">
                        公司
                    </div>
                    <ul class="select-ul company">
                        <li class="active" data-value="">公司</li>
                        <li data-value="1">顺丰</li>
                        <li data-value="2">京东</li>
                        <li data-value="2">EMS</li>
                    </ul>
                </div>
                <div class="select" tabindex="0" hidefocus="true">
                    <div class="select-div">
                        快件类型
                    </div>
                    <ul class="select-ul">
                        <li class="active" data-value="">快件类型</li>
                        <li data-value="0">文件</li>
                        <li data-value="1">物品</li>
                    </ul>
                </div>
            </div>
            <div class="cont-div">
                <div class="chart-box pop-charts">
                    <div id="chart4s" style="width:100%;height:95%;">？？？？？</div>
                </div>
            </div>
            <div class="cont-div">
                <h2 class="title" id="barTitles">派件数据</h2>
                <button class="btn-class" data-state=1 id="tabBtns"><img src="../../images/functionalAreas/forestDataDisplay/chart_icon.png" alt=""><span>图表</span></button>
                <div class="chart-box pop-chart">
                    <div id="chart3s" style="width:100%;height:90%;"></div>
                </div>
                <div class="data-box" style="top:25%;width:8.6rem;display:none;">
                    <table class="table2">
                        <tr>
                            <td>入库件</td>
                            <td colspan="3" class="table-data dph-data1">0</td>
                        </tr>
                        <tr class="bg-color">
                            <td rowspan="2">在库件</td>
                            <td rowspan="2" class="table-data dph-data2">0</td>
                            <td>正常件</td>
                            <td class="table-data dph-data3">0</td>
                        </tr>
                        <tr class="bg-color">
                            <td>滞留件</td>
                            <td class="table-data dph-data5">0</td>
                        </tr>
                        <tr>
                            <td rowspan="2">出库件</td>
                            <td rowspan="2" class="dph-data6">0</td>
                            <td>派送件</td>
                            <td class="table-data dph-data7">0</td>
                        </tr>
                        <tr>
                            <td>自提件</td>
                            <td class="table-data dph-data8">0</td>
                        </tr>
                        <tr class="bg-color">
                            <td>退签件</td>
                            <td colspan="3" class="table-data dph-data9">0</td>
                        </tr>
                        <tr>
                            <td>丢失件</td>
                            <td colspan="3" class="table-data dph-data4">0</td>
                        </tr>
                    </table>
                    <table class="table2" style="display:none;">
                        <tr>
                            <td>入库件</td>
                            <td colspan="3" class="table-data mail-data1">0</td>
                        </tr>
                        <tr class="bg-color">
                            <td rowspan="2">在库件</td>
                            <td rowspan="2" class="table-data mail-data2">0</td>
                            <td>正常件</td>
                            <td class="table-data mail-data7">0</td>
                        </tr>
                        <tr class="bg-color">
                            <td>滞留件</td>
                            <td class="table-data mail-data4">0</td>
                        </tr>

                        <tr>
                            <td>出库件</td>
                            <td colspan="3" class="mail-data6">0</td>
                        </tr>
                        <tr class="bg-color">
                            <td>丢失件</td>
                            <td colspan="3" class="mail-data3">0</td>
                        </tr>
                        <tr>
                            <td>撤销件</td>
                            <td colspan="3" class="table-data mail-data5">0</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="cont-div">
                <h2 class="title" id="titles"></h2>
                <button class="btn-class" id="dateBtns"><img src="../../images/functionalAreas/forestDataDisplay/data_icon.png" alt="">日期</button>
                <div class="data-box  pop-time">
                    <div class="time-box" id="timeBoxs">
                        <div class="time-div">
                            <input class="time-input" type="text" value="" id="startTimes">
                            <img src="../../images/functionalAreas/forestDataDisplay/selsct_time.png" alt="">
                        </div>
                        <div class="time-div end">
                            <input class="time-input" type="text" value="" id="endTimes">
                            <img src="../../images/functionalAreas/forestDataDisplay/selsct_time.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="pop-data-box" id="totalProfits">
                    <p></p>
                </div>
            </div>
            <div class="pop-data">
                <div class="city-data">
                    <div class="city-box">
                        <p id="titleQs"><span>森林片区</span>选择</p>
                        <ul class="city-btn" data-city="2">
                            <li class="active">全网</li>
                            <li>ABCDE</li>
                            <li>FGHIJ</li>
                            <li>KLMNO</li>
                            <li>PQRST</li>
                            <li>UVWXYZ</li>
                        </ul>
                        <ul class="city-div" id="citys">

                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <div class="pop-up">
            <span class="close-pop"></span>
            <h2 class="title">设置</h2>
            <div class="set-div">
                <div class="set-box">
                    <label class="four-f" >排班日期</label>
                    <div class="time-div">
                        <input class="time-input" type="text" value="" id="times">
                        <img src="../../images/functionalAreas/forestDataDisplay/selsct_time.png" alt="">
                    </div>
                </div>
                <div class="set-box">
                    <label >值班人</label>
                    <input type="text" value="">
                    <button class="plus" id="addT"></button>
                    <button class="mineus" id="mineusT" style="display:none;"></button>
                </div>
                <div class="set-box">
                    <label >负责人</label>
                    <input type="text" value="">
                    <button class="plus" id="addL"></button>
                    <button class="mineus" id="mineusL" style="display:none;"></button>
                    <button class="add-btn" id="addSet"><img src="../../images/functionalAreas/forestDataDisplay/plus.png" alt="">添加</button>
                </div>
                <table class="table3">
                    <thead>
                        <tr>
                            <th>值班人</th>
                            <th>排班日期</th>
                            <th>负责人</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tList">
                   <tr>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                   </tr>
                   <tr>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                   </tr>
                   <tr>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                   </tr>
                   <tr>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                   </tr>
                   <tr>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                   </tr>
                   <tr>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                   </tr>
                   <tr>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                       <td>1</td>
                   </tr>
                    </tbody>
                </table>
                <div class="pages-div" class="mineus">
                    <button class="prev"></button>
                    <p id="page"><span>0</span>/<span>0</span></p>
                    <button class="next"></button>
                    <input type="number">
                    <button class="skip">跳转</button>
                </div>
            </div>
            <div class="tishi">日期已存在!</div>
            <div class="edit-div" style="display:none;">
                <h4>编辑</h4>
                <span class="close-edit"></span>
                <div class="set-box">
                    <label >值班人</label>
                    <input class="input-edit" id="editT" type="text" value="">
                </div>
                <div class="set-box">
                    <label >负责人</label>
                    <input class="input-edit" id="editL" type="text" value="">
                </div>
                <div class="set-box edit-box">
                    <button id="qxEdit">取消</button>
                    <button id="qdEdit">确定</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../js/functionalAreas/forestDataDisplay/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../js/functionalAreas/forestDataDisplay/layer/layer.min.js"></script>
<script type="text/javascript" src="../../js/functionalAreas/forestDataDisplay/layer/laydate/laydate.js"></script>
<script type="text/javascript" src="../../js/functionalAreas/forestDataDisplay/echarts.min.js"></script>
<script type="text/javascript" src="../../js/functionalAreas/forestDataDisplay/china.js"></script>
<script type="text/javascript" src="../../js/functionalAreas/forestDataDisplay/data/guangdong.js"></script>
<script type="text/javascript" src="../../js/functionalAreas/forestDataDisplay/base.js"></script>
<script type="text/javascript" src="../../js/functionalAreas/forestDataDisplay/main_function.js"></script>
<script type="text/javascript" src="../../js/functionalAreas/forestDataDisplay/jQuery.Hz2Py-min.js"></script>
<script type="text/javascript">
    $('document').ready(function () {
        $("body").css('visibility', 'visible');
        var localData = [$('#teacher').val(), $('#start').val() + '/' + $('#end').val(), $('#leader').val()]
        localStorage.setItem("data", localData);
        $('#conBtn').on('click', function () {
            localData = [$('#teacher').val(), $('#start').val() + '/' + $('#end').val(), $('#leader').val()]
            if (typeof (Storage) !== "undefined") {
                localStorage.setItem("data", localData);
                var arr = localStorage.getItem("data").split(',');
                $('#name_a').html(arr[0]);
                $('#date_a').html(arr[1]);
                $('#lea_a').html(arr[2]);
            }
        })
        $('#fangda').on('click', function () {
            if ($(this).siblings('ul').is(":hidden")) {
                $(this).addClass('active').siblings('ul').show();
            } else {
                $(this).removeClass('active').siblings('ul').hide();
            }
        })

        $('.modal-btn>li').on('click', function () {
            var index = $(this).index();
            if (index <= 2) {
                $('.container').attr('style', 'visibility: visible').find('.pop-up').eq(index).attr('style', 'visibility: visible').siblings().attr('style', 'visibility: hidden');
            } else if (index > 2 && index < 5) {
                $('.container').attr('style', 'visibility: visible').find('.pop-up').eq(3).attr('style', 'visibility: visible').siblings().attr('style', 'visibility: hidden');
                if (index != 3) {
                    $('.pop-data .ranking-box').hide();
                } else {
                    $('.pop-data .ranking-box').show();
                }
                $('.cont-div').eq(index - 3).attr('style', 'visibility: visible').siblings('.cont-div').attr('style', 'visibility: hidden');
            } else if (index == 5) {
                $('.container').attr('style', 'visibility: visible').find('.pop-up').eq(3).attr('style', 'visibility: visible').siblings().attr('style', 'visibility: hidden');
                $('.pop-data .ranking-box').hide();
                if ($('#switchBtn').find('.active').data('datatype') == "income") {
                    $('#titles').html('收入数据');
                    $('#totalProfits').html('123,456.5元');
                    $('.cont-div').eq(2).attr('style', 'visibility: visible').siblings('.cont-div').attr('style', 'visibility: hidden');
                } else if ($('#switchBtn').find('.active').data('datatype') == 'expend') {
                    $('#titles').html('支出数据');
                    $('#totalProfits').html('32,111.4元');
                    $('.cont-div').eq(2).attr('style', 'visibility: visible').siblings('div').attr('style', 'visibility: hidden');
                }
            }
        })
    })
</script>
<!--//绘图函数-->
<script>
    let myDate = new Date();
    let hour = myDate.getHours();
    let weeks = ["日", "一", "二", "三", "四", "五", "六"];
    let week = weeks[new Date().getDay()]
    //气温图变量
    let temperatureTime = ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'];
    let temperatureData = [[11, 11, 15, 13, 12, 13, 10,17,16,18,13,17,9,15,13,14,12,9,21,10,20,14,18],[1, -2, 2, 5, 3, 2, 0,4,8,6,11,9,17,7,6,8,23,14,5,12,23,15,16],[11, 11, 15, 13, 12, 13, 10,17,16,18,13,17,9,15,13,14,12,9,21,10,20,14,18],[11, 11, 15, 13, 12, 13, 10,17,16,18,13,17,9,15,13,14,12,9,21,10,20,14,18],[11, 11, 15, 13, 12, 13, 10,17,16,18,13,17,9,15,13,14,12,9,21,10,20,14,18]]
    let temperaturetime = [];
    let temperaturedata = [[],[],[],[],[]];
    let temperatureData1 = [11, 11, 15, 13, 12, 13, 10,17,16,18,13,17,9,15,13,14,12,9,21,10,20,14,18]
    let temperaturedata1 = [11, 11, 15, 13, 12, 13, 10,17,16,18,13,17,9,15,13,14,12,9,21,10,20,14,18]

    //湿度图变量
    let humidityTitle = '昆明市湿度图';
        //柱状图
    let xLableData = ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00' ];
    let xLable =[];
    let VALUEData = [105,250, 230, 120,82,30,70,60,50,40,30,50,88,16,99,66,32,8,262,187,55,168,14,22];
    let MAXData = [105,250, 230, 120,82,30,70,60,50,40,30,50,88,16,99,66,32,8,262,187,55,168,14,22];
    let VALUE = [] ;
    let MAX = [];
        //折线图
    let XNameData = ["0:00", "1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"];
    let XName = [];
    let linePicData = [67, 97, 51, 338, 32, 11, 1,52,64,21,75,66,53,79,75,88,23,46,13,33,69,42,24,123];
    let linePicdata = [];
    let coords = [];
        // 雷达图变量
    let radarValue = [43, 100, 10, 150, 100, 12,50,60,70,80,90,100,30,50,60,40,20,100,20,70,10,60,100,123];
    let radarvalue = [];
    let radarIndicator = [{name: "0:00", max: 200}, {name: "1:00", max: 200}, {name: "2:00", max: 200}, {name: "3:00", max: 200}, {name: "4:00", max: 200}, {name: "5:00", max: 200}, {name: "6:00", max: 200},{name: "7:00", max: 200},{name: "8:00", max: 200}, {name: "9:00", max: 200}, {name: "10:00", max: 200}, {name: "11:00", max: 200}, {name: "12:00", max: 200}, {name: "13:00", max: 200}, {name: "14:00", max: 200}, {name: "15:00", max: 200}, {name: "16:00", max: 200}, {name: "17:00", max: 300}, {name: "18:00", max: 200}, {name: "19:00", max: 200}, {name: "20:00", max: 200}, {name: "21:00", max: 200}, {name: "22:00", max: 200}, {name: "23:00", max: 200}]
    let radarindicator = [];
    //风速图变量
    let aCategorysData = ['', '0\n\r:\n\r00', '1\n\r:\n\r00', '2\n\r:\n\r00', '3\n\r:\n\r00', '4\n\r:\n\r00', '5\n\r:\n\r00', '6\n\r:\n\r00', '7\n\r:\n\r00', '8\n\r:\n\r00', '9\n\r:\n\r00', '10\n\r:\n\r00', '11\n\r:\n\r00', '12\n\r:\n\r00', '13\n\r:\n\r00', '14\n\r:\n\r00', '15\n\r:\n\r00', '16\n\r:\n\r00', '17\n\r:\n\r00', '18\n\r:\n\r00', '19\n\r:\n\r00', '20\n\r:\n\r00', '21\n\r:\n\r00', '21\n\r:\n\r00', '22\n\r:\n\r00', '23\n\r:\n\r00'];
    let aCategorys= [];
    let topdataData = [0,96, 96, 97, 95, 98, 94, 89, 94, 80, 67, 90, 94,90,89,32,53,12,64,22,94,62,42,66,42];
    let dataData = ['-',96, 96, 97, 95, 98, 94, 89, 94, 80, 67, 90, 94,90,89,32,53,12,64,22,94,62,42,66,42,'-']
    let topdata = [] ;
    let data =[];
    let time1Data = ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00',
        '10:00', '11:00', '12:00','13:00', '14:00', '15:00', '16:00', '17:00',
        '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
    let time1 = [];
    let data1Data = [0.3, 0.9, 0.7, 1.1, 0.5, 0.4, 0.3, 0.8, 0.9, 0.6, 0.5, 0.7, 0.9, 0.5, 0.8, 0.7, 0.9, 0.8, 0.3,0.5,0.6,0.4,0.8,0.7,0.6];
    let data1 = [];
    let hour1 = hour+1


    if(hour<=12){
        for(let i=0;i<=hour;i++){
            xLable[i] = xLableData[i];
            VALUE[i] = VALUEData[i];
            MAX[i] = MAXData[i];
            XName[i] = XNameData[i];
            linePicdata[i] = linePicData[i];
            radarvalue[i] = radarValue[i];
            radarindicator[i] = radarIndicator[i];
            temperaturedata1 = temperatureData1[i]
        }
    }else{ //hour>12
        for(let a=0;a<=12;a++){
            xLable[12-a] = xLableData[hour-a];
            VALUE[12-a] = VALUEData[hour-a];
            MAX[12-a] = MAXData[hour-a];
            XName[12-a] = XNameData[hour-a];
            linePicdata[12-a] = linePicData[hour-a];
            radarvalue[12-a] = radarValue[hour-a];
            radarindicator[12-a] = radarIndicator[hour-a];
            temperaturedata1[12-a] = temperatureData1[hour-a]
        }
    }

    for(let b=0;b<XName.length;b++){
        coords[b] = [XName[b],linePicdata[b]]
    }


    //气温图
    function drawTemperatureChart() {
        if(hour<=12){
            for(let i=0;i<=hour;i++){
                temperaturetime[i] = temperatureTime[i];
                for(let c=0;c<5;c++){
                    temperaturedata[c][i] = temperatureData[c][i];
                }
            }
        }else{ //hour>12
            for(let d=0;d<=12;d++){
                temperaturetime[12-d] = temperatureTime[hour-d];
                for(let e=0;e<5;e++){
                    temperaturedata[e][12-d] = temperatureData[e][hour-d];
                }
            }
        }


        let myChart1 = echarts.init(document.getElementById('temperature'));
        let option1 = {
            tooltip: {
                trigger: 'axis'
            },

            // legend: {
            //     data: ['周一', '周二', '周三', '周四', '周五'],
            //     textStyle:{
            //         color:"#fff",
            //         itemWidth: 3
            //     }
            // },
            toolbox: {
                show: true,
                feature: {
                    magicType: {type: ['line', 'bar']},
                    saveAsImage: {}
                },
                padding: [20, 0],
                right:25
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: temperaturetime,
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C',
                    color: "rgba(255,255,255,.7)"
                },
            },
            series: [
                {
                    type: 'line',
                    data: temperaturedata[0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                }
            ]
        };
        myChart1.setOption(option1)
        window.addEventListener("resize", function() {
            myChart1.resize();
        });
    };
    //湿度图
    let myChart2 = echarts.init(document.getElementById('dampness'));
    let option2 ='';
    function drawHumidityBarChart(){
        myChart2.clear()
        // 绘制左侧面
        const CubeLeft = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0
            },
            buildPath: function(ctx, shape) {
                const xAxisPoint = shape.xAxisPoint
                const c0 = [shape.x, shape.y]
                const c1 = [shape.x - 13, shape.y - 13]
                const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13]
                const c3 = [xAxisPoint[0], xAxisPoint[1]]
                ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
            }
        })
        // 绘制右侧面
        const CubeRight = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0
            },
            buildPath: function(ctx, shape) {
                const xAxisPoint = shape.xAxisPoint
                const c1 = [shape.x, shape.y]
                const c2 = [xAxisPoint[0], xAxisPoint[1]]
                const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
                const c4 = [shape.x + 18, shape.y - 9]
                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
            }
        })
        // 绘制顶面
        const CubeTop = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0
            },
            buildPath: function(ctx, shape) {
                const c1 = [shape.x, shape.y]
                const c2 = [shape.x + 18, shape.y - 9]
                const c3 = [shape.x + 5, shape.y - 22]
                const c4 = [shape.x - 13, shape.y - 13]
                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
            }
        })
        // 注册三个面图形
        echarts.graphic.registerShape('CubeLeft', CubeLeft)
        echarts.graphic.registerShape('CubeRight', CubeRight)
        echarts.graphic.registerShape('CubeTop', CubeTop)

        MAX = MAX
        VALUE = VALUE
        option2 = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function(params, ticket, callback) {
                    const item = params[1]
                    return item.name + ' : ' + item.value;
                }
            },
            grid: {
                left: 40,
                right: 40,
                bottom: 100,
                top: 100,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: xLable,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'white',
                        fontSize:"5px"
                    }
                },
                offset: 25,
                axisTick: {
                    show: false,
                    length: 9,
                    alignWithLabel: true,
                    lineStyle: {
                        color: '#7DFFFD'
                    }
                },
                axisLabel: {
                    show: true,
                    fontSize: 10
                },
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'white'
                    }
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    fontSize: 16
                },
                boundaryGap: ['20%', '20%']
            },
            series: [{
                type: 'custom',
                renderItem: function(params, api) {
                    const location = api.coord([api.value(0), api.value(1)])
                    return {
                        type: 'group',
                        children: [{
                            type: 'CubeLeft',
                            shape: {
                                api,
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: 'rgba(47,102,192,.27)'
                            }
                        }, {
                            type: 'CubeRight',
                            shape: {
                                api,
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: 'rgba(59,128,226,.27)'
                            }
                        }, {
                            type: 'CubeTop',
                            shape: {
                                api,
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: 'rgba(72,156,221,.27)'
                            }
                        }]
                    }
                },
                data: MAX
            }, {
                type: 'custom',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)])
                    var color = api.value(1) > 2000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(67,102,243,1)'
                    },
                        {
                            offset: 1,
                            color: 'rgba(29,67,243,1)'
                        }
                    ])
                    return {
                        type: 'group',
                        children: [{
                            type: 'CubeLeft',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: color
                            }
                        }, {
                            type: 'CubeRight',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: color
                            }
                        }, {
                            type: 'CubeTop',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: color
                            }
                        }]
                    }
                },
                data: VALUE
            }, {
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'top',

                        fontSize: 16,
                        color: '#fff',
                        offset: [2, -25]
                    }
                },
                itemStyle: {
                    color: 'transparent'
                },
                tooltip: {

                },
                data: MAX
            }]
        }
        myChart2.setOption(option2);

    };
    function drawHumidityLineChart(){
        myChart2.clear()

        //数据


        var img = [
            'image://',
            'image://',
            'image://',
            'image://',
        ]

        var line1Data = [{
            coords: coords
        }]

        option2 = {
            title: {
                text: humidityTitle,
                textStyle:{
                    color:"#fff",
                    fontSize:12,
                },
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '15%',
                top: '15%',
                bottom: '15%',
                right: '15%',
            },
            yAxis: [{
                type: 'value',
                position: 'left',
                nameTextStyle: {
                    color: '#00FFFF'
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(135,140,147,0.8)'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value}',
                    color: '#fff',
                    fontSize: 14
                }
            }, ],
            xAxis: [{
                type: 'category',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#0696f9',
                    }
                },
                axisLabel: {
                    inside: false,
                    interval: 0,
                    rotate: -40,
                    textStyle: {
                        color: '#fff', // x轴颜色
                        fontWeight: 'normal',
                        fontSize: 10,
                        lineHeight: 22
                    }

                },
                data: XName,
            }, ],
            series: [{
                symbolSize: 150,
                symbol: img[2],
                name: '湿度值：',
                type: "line",
                data: linePicdata,
                itemStyle: {
                    normal: {
                        borderWidth: 4,
                        color: '#0696f9',
                    }
                }
            },
                {
                    name: '滑行的光点',
                    type: 'lines',
                    coordinateSystem: 'cartesian2d',
                    symbolSize: 30,
                    polyline: true,
                    effect: {
                        show: true,
                        trailLength: 0,
                        symbol: "arrow",
                        period: 10, //光点滑动速度
                        symbolSize: 150,
                        symbol: img[0]
                    },
                    lineStyle: {
                        normal: {
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    },
                    data: line1Data
                }
            ],
        };
        myChart2.setOption(option2);
    };
    function drawHumidityRaddarChart(){
        myChart2.clear()
        option2 = {
            title: {
            },
            tooltip: {
                textStyle:{
                    fontSize:10
                },

            },
            radar: {
                shape: 'circle',
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                indicator: radarindicator

            },
            series: [{
                type: "radar",
                name:'各时刻湿度',
                data: [{
                    value: radarvalue,

                }],
                itemStyle: {
                    normal: {
                        color: "#1DBB37",
                    }
                }
            },
            ],
        };
        myChart2.setOption(option2);
        window.addEventListener('resize', function () {
            myChart2.resize();
        });
    };
    //风速图
    function drawWindspeedChart() {
        let myChart5 = echarts.init(document.getElementById('chart3'));
        let myChart6 = echarts.init(document.getElementById('chart3_1'));

        if(hour<=12){
            for(let i=0;i<=hour1;i++){
                aCategorys[i] = aCategorysData[i];
                topdata[i] = topdataData[i];
                data[i] = dataData[i];
            }
        }else{ //hour>12
            for(let a=0;a<=12;a++){
                aCategorys[12-a] = aCategorysData[hour1-a];
                topdata[12-a] = topdataData[hour1-a];
                data[12-a] = dataData[hour1-a];
            }
        }
        if(hour<=12){
            for(let i=0;i<=hour;i++){
                time1[i] = time1Data[i];
                data1[i] = data1Data[i];
            }
        }else{ //hour>12
            for(let a=0;a<=12;a++){
                time1[12-a] = time1Data[hour-a];
                data1[12-a] = data1Data[hour-a]
            }
        }

        var colors = ['rgba(251,210,73,0.7)', 'rgba(251,210,73,0.7)', 'rgba(124,213,253,0.7)', 'rgba(124,213,253,0.7)', 'rgba(124,213,253,0.7)', 'rgba(124,213,253,0.7)', 'rgba(124,213,253,0.7)', 'rgba(124,213,253,0.7)', 'rgba(181,236,69,0.7)', 'rgba(181,236,69,0.7)', 'rgba(136,243,227,0.7)', 'rgba(136,243,227,0.7)', 'rgba(136,243,227,0.7)', 'rgba(136,243,227,0.7)'];
        var aSeries = [{

            type: 'line',
            symbol:'circle',
            symbolSize:12,
            itemStyle: {
                normal: {
                    color: '#F6A623',
                    borderColor:"#ffffff",
                    borderWidth:2
                }
            },
            lineStyle: {
                normal: {
                    opacity: 0
                }
            },

            data: data
        }];

        aCategorys.forEach(function(v, i, a) {
            var name = v;
            if (v !== '') {
                var data = [];
                for (var j = 0; j < aCategorys.length; j++) {
                    data.push('-');
                }
                data[i - 1] = 0;
                data[i] = topdata[i];
                data[i + 1] = 0;
                aSeries.push({
                    name: name,
                    type: 'pictorialBar',
                    smooth: false,
                    legendHoverLink:false,
                    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                    barCategoryGap: '-130%',
                    label:{
                        normal:{
                            show:false
                        },
                        emphasis:{
                            show:false
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: colors[i - 1] // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: colors[i - 1] // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    data: data,
                });
            }
        });

        var option5 = null;
        option5 = {
            color: colors,
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    var rValue =params[0].name+'<br>';
                    params.forEach(function(v, i, a) {
                        if (v.data !== 0 && v.data !== "-" && v.seriesType == "line") {
                            rValue+='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + v.color + '"></span>'+v.data +'<br>';
                        }
                    })
                    return rValue;
                }
            },
            grid:{
                y:'5%',
            },
            legend: {
                show:false
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: aCategorys,
                axisLabel:{
                    textStyle:{
                        fontSize:12,
                        color: "#fff"

                    }
                },
                splitLine: {
                    show: true,
                    lineStyle:{
                        color:'#f7f7f7'
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle:{
                        color:'#fff'
                    },

                },
                axisLabel: {
                    fontSize:12,
                    color: "#fff"
                },
            }],
            series: aSeries
        };

        var option6 = {
            legend: {
                show:false
            },
            grid:{
                x:'10%',
                y:'15%',
                x2:'10%',
                y2:'30%'
            },
            tooltip: {
                trigger: 'axis',
            },

            xAxis: { //x轴
                type: 'category',
                boundaryGap: false, //坐标轴两边留白策略
                data: time1,
                axisLabel: {
                    interval: 0,
                    rotate: -40,
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
            },
            yAxis: { //y轴
                min: 0,
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    },
                },
                axisLine: {
                    "show": false,
                    lineStyle: {
                        color: '#fff'
                    }
                },
            },
            series: [
                {
                    name: '风速',
                    data: data1,
                    type: 'line',
                    smooth: true, //折线是否平滑
                    areaStyle: {
                        opacity: 0
                    },
                    itemStyle: {
                        normal: {
                            color: "#197CD8", //小圆点的颜色
                            lineStyle: {
                                color: "#197CD8" //折线的颜色
                            }
                        }
                    },
                },
            ]
        };
        myChart5.setOption(option5)
        myChart6.setOption(option6)
        window.addEventListener("resize", function() {
            myChart5.resize();
        });
        window.addEventListener("resize", function() {
            myChart6.resize();
        });
    };
</script>

<!--气温图-->
<script>
    drawTemperatureChart()
</script>
<!--湿度图-->
<script>
    drawHumidityLineChart()
    $("#bar1").click(function (){
        drawHumidityBarChart()
    })
    $("#line1").click(function (){
       drawHumidityLineChart()
    })
    $("#radar1").click(function (){
       drawHumidityRaddarChart()
    })

</script>
<!--风速图-->
<script>
    drawWindspeedChart()
</script>
</html>